<template>
  <div class="f-right-card__wrapper">
    <div class="f-right-card--title">
      <slot></slot>
    </div>
    <div class="f-right-card__content">
      <div class="row">
        <div class="col row">
          <div
            :class="{ 'f-right-card--icon-left': true, [`${icon1}`]: !!icon1 }"
          ></div>
          <div class="row row--column justify-content-center">
            <span class="f-right-card--tag">
              {{ tag1 }}
            </span>
            <div class="f-right-card--text">
              <em>{{ data1 }}</em>
              <span>/</span>
              <span>{{ unit }}</span>
            </div>
          </div>
        </div>
        <div class="col row">
          <div
            :class="{ 'f-right-card--icon-right': true, [`${icon2}`]: !!icon2 }"
          ></div>
          <div class="row row--column justify-content-center">
            <span class="f-right-card--tag">
              {{ tag2 }}
            </span>
            <div class="f-right-card--text">
              <em>{{ data2 }}</em>
              <span>/</span>
              <span>{{ unit }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RightCardTemplate',
  props: {
    tag1: String,
    data1: {
      type: [Number, String],
      default: 0,
    },
    tag2: String,
    data2: {
      type: [Number, String],
      default: 0,
    },
    unit: {
      type: String,
      default: '人次',
    },
    icon1: String,
    icon2: String,
  },
};
</script>